<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<link href="css/font.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->

<!-- Custom Theme files -->
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

<!--webfont-->
<!--<link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>-->
 <script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
			});
		});
	</script>

	<script>
	$(function(){
	    $(".hov").hide();
	    $(".text").hide();
	    $(".col-md-3").hover(
        function()
        {
		    $(this).find(".hov").stop().fadeTo(286,0.5);
		    $(this).find(".text").stop().show();
	    },
	    function()
        {
            $(this).find(".hov").stop().fadeTo(286, 0);
            $(this).find(".text").stop().hide();
        });
    });
//    $(".like").hide();

//    $(function likeit(){
//        for(var i=1;i<=16;i++){
//            if(document.getElementById("u"+i).onclick==true){
//                document.getElementById("u"+i).hide();
//                document.getElementById("l"+i).show();
//            }
//        }
//    });
//
//    $(function unlikeit(){
//        for(var i=1;i<=16;i++){
//            if(document.getElementById("l"+i).onclick==true){
//                document.getElementById("l"+i).hide();
//                document.getElementById("u"+i).show();
//            }
//        }
//    });

</script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event){
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
            });
        });

//        function change(n){
//            if(n%2==1){
//                document.getElementById('l'+(n+1)).style.display="inline";
//                document.getElementById('l'+n).style.display="none";
//
//            }
//            if(n%2==0){
//                document.getElementById('l'+n).style.display="none";
//                document.getElementById('l'+(n-1)).style.display="inline";
//            }
//        }

        function change(n,id){
            if(n%2==1){
                document.getElementById('l'+(n+1)).style.display="inline";
                document.getElementById('l'+n).style.display="none";


            }
            if(n%2==0){
                document.getElementById('l'+n).style.display="none";
                document.getElementById('l'+(n-1)).style.display="inline";
            }
        }

    </script>
    <style>
        .thumbnail {
            max-height:210px;
            min-height:200px;
            overflow:hidden;
            bottom:0;
            margin:0;
            padding: 0;
        }
    </style>
</head>
<body>
	<!-- header-section-starts -->
	<div class="header" id="header" style="background: #27121c">
		<div class="container">
            <div class="reglogbar-user">
                <div class="userp">
                    <a href="personal.html"> <span>Jully Coco &nbsp;</span> </a>
                    <a href="personal.html"> <img src="images/user-p.png" /> </a>
                </div>
            </div>
			<div class="logo" style="padding-top: 15px;">
				<a href="index.html"><img src="images/imangine.png" alt="" /></a>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
    <div class="slideing">
        <div class="head-bg">
            <!-- container -->
            <div class="container">
                <!--<div class="head-logo">-->
                    <!--<a href="index.html"><img src="images/logo.png" alt="" /></a>-->
                <!--</div>-->
                <div class="top-nav">
                    <ul class="cl-effect-1">
                        <!--<li><a href="contact.html">Contact</a></li>-->
                        <li><a href="about.html">About us</a></li>
                        <li><a href="search.html">Search</a></li>
                        <li><a href="group.html">Group</a></li>
                        <li><a href="album.html">Album</a></li>
                        <li><a href="pic.html">Picture</a></li>

                        <!--<div class="clearfix"></div>-->
                    </ul>
                    <!-- script-for-menu -->
                    <script>
                        $( "span.menu" ).click(function() {
                            $( "ul.cl-effect-1" ).slideToggle( 300, function() {
                                // Animation complete.
                            });
                        });
                    </script>
                    <!-- /script-for-menu -->
                </div>
                <div class="clearfix"> </div>
            </div>
            <!-- //container -->
        </div>
        <!-- container -->
        <div class="container">
            <!-- banner Slider starts Here -->
            <script src="js/responsiveslides.min.js"></script>
            <script>
                // You can also use "$(window).load(function() {"
                $(function () {
                    // Slideshow 4
                    $("#slider3").responsiveSlides({
                        auto: true,
                        pager: false,
                        nav: false,
                        speed: 500,
                        namespace: "callbacks",
                        before: function () {
                            $('.events').append("<li>before event fired.</li>");
                        },
                        after: function () {
                            $('.events').append("<li>after event fired.</li>");
                        }
                    });

                });


//                function change(n){
//                    if(n==1){
//                        document.getElementById('l2').show();
//                        document.getElementById('l1').hidden();
//                    }
//                    if(n==2){
//                        document.getElementById('l1').show();
//                        document.getElementById('l2').hidden();
//                    }
//                }
            </script>
            <!--//End-slider-script -->
            <div  id="top" class="callbacks_container">
                <ul class="rslides" id="slider3">
                    <li>
                        <div class="head-info">
                            <h1>Life<span>Innovate and take the time</span></h1>
                            <p>Investing the resources and caring enough to try.</p>
                        </div>
                    </li>
                    <li>
                        <div class="head-info">
                            <h1>Design<span>Soul of a human-made creation</span></h1>
                            <p>Nothing could be further from the meaning of design. </p>
                        </div>
                    </li>
                    <li>
                        <div class="head-info">
                            <h1>Sharing<span>Good coffee to friends and taste</span></h1>
                            <p>We must be Shared with other life of our earth.</p>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
        <!-- container -->
    </div>
	<!--<div class="header-bottom">-->
		<!--<div class="container">-->
		<!--</div>-->
	<!--</div>-->
	<!--<div class="navigation-strip">-->
		<!--<div class="container">-->
			<!--<div class="nav_content">-->
				<!--<div class="home">-->
					<!--<a href="index.html"><img src="images/home.png" alt="" /></a>-->
				<!--</div>-->
				<!--<!-- <div class="search">-->
					<!--<form>-->
						<!--<input type="text" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search..';}"/>-->
						<!--<input type="submit" value="">-->
					<!--</form>-->
				<!--</div> -->
			<!--<span class="menu"></span>-->
				<!--<div class="top-menu">-->
					<!--<ul>-->
						<!--<li><a href="pic.html">Sharing</li>			-->
						<!--<li><a href="blog.html">Personal</a></li>-->
						<!--<li><a href="portfolio.html">Tags</a></li>-->
						<!--<!-- <li><a href="404.html">Features</a></li>-->
						<!--<li><a href="contact.html">Contact</a></li> -->
						<!--<li><a href="about.html">About Us</a></li>-->
						<!--<div class="clearfix"></div>-->
					<!--</ul>-->
				<!--</div>-->
				<!--<!-- script for menu -->
				<!--<script>-->
				<!--$( "span.menu" ).click(function() {-->
				  <!--$( ".top-menu" ).slideToggle( "slow", function() {-->
				    <!--// Animation complete.-->
				  <!--});-->
				<!--});-->
			    <!--</script>-->
			    <!--<!-- script for menu -->
				<!--<div class="clearfix"></div>-->
			<!--</div>-->
		<!--</div>-->
	<!--</div>-->
<div class="content">
	<div class="container">
		<div class="projects-section">
				<h4 class="head">Hot Sharing<span class="line"></span></h4>				
			<div class="latest-projects">
                <div class="row">
					<div class="col-md-3 project">
						<a href="single.html" class="thumbnail"><img src="images/p1.jpg" alt="" /></a>
						<div class="hov">
                           <img class="likeit pull-right" id="l1" onclick="change(1)" style="display:inline;"  src="images/hollowheart.png"/>
                           <img class="likeit pull-right" id="l2" onclick="change(2)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
						<a href="single.html"><div class="text"><div>Animation <span>Spongbob</span></div></div></a>
					</div>
					<div class="col-md-3 project">
						<a href="single.html" class="thumbnail"><img src="images/p2.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l3" onclick="change(3)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l4" onclick="change(4)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
						<a href="single.html"><div class="text"><div>POST TEST</div></div></a>
					</div>
					<div class="col-md-3 project">
						<a href="single.html" class="thumbnail"><img src="images/p3.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l5" onclick="change(5)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l6" onclick="change(6)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
						<a href="single.html"><div class="text"><div>POST TEST</div></div></a>
					</div>
					<div class="col-md-3 project">
						<a href="single.html" class="thumbnail"><img src="images/p4.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l7" onclick="change(7)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l8" onclick="change(8)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
						<a href="single.html"><div class="text"><div>POST TEST</div></div></a>
					</div>
                </div>
                <div class="row">
					<div class="col-md-3 project">
						<a href="single.html" class="thumbnail"><img src="images/p5.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l9" onclick="change(9)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l10" onclick="change(10)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
						<a href="single.html"><div class="text"><div>POST TEST</div></div></a>
					</div>
					<div class="col-md-3 project">
						<a href="single.html" class="thumbnail"><img src="images/p6.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l11" onclick="change(11)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l12" onclick="change(12)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
						<a href="single.html"><div class="text"><div>POST TEST</div></div></a>
					</div>
					<div class="col-md-3 project">
						<a href="single.html" class="thumbnail"> <img src="images/p7.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l13" onclick="change(13)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l14" onclick="change(14)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
						<a href="single.html"><div class="text"><div>POST TEST</div></div></a>
					</div>
					<div class="col-md-3 project">
						<a href="single.html" class="thumbnail"><img src="images/p8.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l15" onclick="change(15)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l16" onclick="change(16)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
						<a href="single.html"><div class="text"><div>POST TEST</div></div></a>
					</div>
                </div>
                <div class="row">
                    <div class="col-md-3 project">
                        <a href="single.html" class="thumbnail"><img src="images/p9.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l17" onclick="change(17)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l18" onclick="change(18)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
                        <a href="single.html"><div class="text"><div>POST TEST</div></div></a>
                    </div>
                    <div class="col-md-3 project">
                        <a href="single.html" class="thumbnail"><img src="images/p10.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l19" onclick="change(19)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l20" onclick="change(20)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
                        <a href="single.html"><div class="text"><div>POST TEST</div></div></a>
                    </div>
                    <div class="col-md-3 project">
                        <a href="single.html" class="thumbnail"><img src="images/p11.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l21" onclick="change(21)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l22" onclick="change(22)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
                        <a href="single.html"><div class="text"><div>POST TEST</div></div></a>
                    </div>
                    <div class="col-md-3 project">
                        <a href="single.html" class="thumbnail"><img src="images/p12.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l23" onclick="change(23)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l24" onclick="change(24)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
                        <a href="single.html"><div class="text"><div>POST TEST</div></div></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 project">
                        <a href="single.html" class="thumbnail"><img src="images/p13.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l25" onclick="change(25)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l26" onclick="change(26)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
                        <a href="single.html"><div class="text"><div>POST TEST</div></div></a>
                    </div>
                    <div class="col-md-3 project">
                        <a href="single.html" class="thumbnail"><img src="images/p14.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l27" onclick="change(27)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l28" onclick="change(28)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
                        <a href="single.html"><div class="text"><div>POST TEST</div></div></a>
                    </div>
                    <div class="col-md-3 project">
                        <a href="single.html" class="thumbnail"><img src="images/p15.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l29" onclick="change(29)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l30" onclick="change(30)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
                        <a href="single.html"><div class="text"><div>POST TEST</div></div></a>
                    </div>
                    <div class="col-md-3 project">
                        <a href="single.html" class="thumbnail"><img src="images/p16.jpg" alt="" /></a>
                        <div class="hov">
                            <img class="likeit pull-right" id="l31" onclick="change(31)" style="display:inline;"  src="images/hollowheart.png"/>
                            <img class="likeit pull-right" id="l32" onclick="change(32)" style="display:none;"  src="images/fullheart.png"/>
                        </div>
                        <a href="single.html"><div class="text"><div>POST TEST</div></div></a>
                    </div>
                </div>
                <div class="clearfix"></div>
			</div>
		</div>
	</div>
</div>
	<div class="footer">
		<div class="footer-top">
			<div class="container">
				<div class="col-md-4 footer-grid">
					<h5>ABOUT US</h5>
					<p>Group from School of Software Engineering in Tongji University</p>
				</div>
				<div class="col-md-4 footer-grid">
					
				</div>
				<div class="col-md-4 footer-grid">
					<h5>FOLLOW US</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in purus nibh. Donec ornare felis neque. Nullam tortor! </p>
					
			
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="footer-bottom">
			<div class="container">
				<div class="copyrights">
					<p>Copyright &copy; 2015.Imangine All rights reserved.</p>
				</div>
				<div class="go-top">
					<a href="#header" class="scroll"><img src="images/go-to-top.png" alt="" /></a>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	
</body>
</html>